<template>
  <div class="container">
    <div class="w1300">
      <breadcrumb currentPath="/mall/goods/car" title="购物车"></breadcrumb>

      <h2 class="car-header-wrap">购物车（全部6）</h2>
      <div class="car-table">
        <el-table ref="carTable" :data="carData" style="width: 100%"  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" label="全选" />
          <el-table-column prop="12" width="130" label="">
            <template #default="{ row }">
              <img class="goodsPhoto" src="" />
            </template>
          </el-table-column>
          <el-table-column prop="title" label="商品信息" width="294">
            <template #default="{ row }">
              <div class="tit-wrap">
                <h2>{{ row.title }}</h2>
                <span>{{ row.category }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="订单类型" width="180" />
          <el-table-column prop="price" label="单价" />
          <el-table-column prop="address" label="数量" width="150">
            <template #default="{ row }">
              <el-input-number
                class="num-wrap"
                size="small"
                v-model="row.num"
                :min="0"
                :step="1"
              />
            </template>
          </el-table-column>
          <el-table-column prop="totalPrice" label="金额" />
          <el-table-column prop="address" label="操作">
            <el-button size="small" type="danger" @click="visible = !visible">删除</el-button>
          </el-table-column>
        </el-table>

        <div class="result-wrap flex-xbt">
          <div class="flex-yc">
            <el-checkbox @change="onSelectedCar">全选</el-checkbox>
            <el-button class="del-both" type="danger" size="small">
              删除
            </el-button>
          </div>
          <div class="result flex-yc">
            已选 1 件商品 总价：
            <b>{{ totalAmount }}</b>
            <el-button class="submit-btn" type="primary" @click="onSubmitCar">
              结算
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <comm-dialog v-model="visible" @onSubmit="delSubmit">
      <span>确定删除这些产品吗?</span>
    </comm-dialog>
  </div>
</template>

<script setup lang="ts">
import Breadcrumb from '@/pages/mall/components/BreadcrumbCom.vue'
import CommDialog from '@/pages/mall/components/CommDialog.vue'
import { reactive, ref,computed } from 'vue'
import { ElTable } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()

const visible = ref(false)


interface cargoods {
  property: string
  num: string
  totalPrice: string | number
}
const carData = reactive([
  {
    title: '这里是产品标题这里是产品标题这里是产品标题产品标题这里是产品标题',
    category: '分类：年会员（优惠券十张）',
    type: '会员订单',
    price: '¥ 3333.00',
    num: 1,
    totalPrice: '333.00',
  },
  {
    title: '这里是产品标题这里是产品标题这里是产品标题产品标题这里是产品标题',
    category: '分类：年会员（优惠券十张）',
    type: '会员订单',
    price: '¥ 3333.00',
    num: 1,
    totalPrice: '333.00',
  },
  {
    title: '这里是产品标题这里是产品标题这里是产品标题产品标题这里是产品标题',
    category: '分类：年会员（优惠券十张）',
    type: '会员订单',
    price: '¥ 3333.00',
    num: 1,
    totalPrice: '333.00',
  },
  {
    title: '这里是产品标题这里是产品标题这里是产品标题产品标题这里是产品标题',
    category: '分类：年会员（优惠券十张）',
    type: '会员订单',
    price: '¥ 3333.00',
    num: 1,
    totalPrice: '333.00',
  },
  {
    title: '这里是产品标题这里是产品标题这里是产品标题产品标题这里是产品标题',
    category: '分类：年会员（优惠券十张）',
    type: '会员订单',
    price: '¥ 3333.00',
    num: 1,
    totalPrice: '333.00',
  },
  {
    title: '这里是产品标题这里是产品标题这里是产品标题产品标题这里是产品标题',
    category: '分类：年会员（优惠券十张）',
    type: '会员订单',
    price: '¥ 3333.00',
    num: 1,
    totalPrice: '333.00',
  },
  {
    title: '这里是产品标题这里是产品标题这里是产品标题产品标题这里是产品标题',
    category: '分类：年会员（优惠券十张）',
    type: '会员订单',
    price: '¥ 3333.00',
    num: 1,
    totalPrice: '333.00',
  },
])

const carTable = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<cargoods[]>([])
const totalAmount:Number = computed(() => {  
  const totalSum= multipleSelection.value.reduce((sum, item) => sum + (Number(item.totalPrice)*item.num), 0)||0; 
  return totalSum.toFixed(2);  
});  
const handleSelectionChange = (val: cargoods[]) => {
  console.log(val,'val')
  multipleSelection.value = val
}

const onSelectedCar = (val) => {
  if (val) {
    carData.forEach((row) => {
      carTable.value!.toggleRowSelection(row, undefined)
    })
  } else {
    carTable.value!.clearSelection()
  }
  visible.value = !visible.value
}
const delSubmit=()=>{
  // let selectedRows = carTable.value?.getSelectedRows(); // 使用可选链操作符来安全地访问  
  // console.log(selectedRows)
  console.log(multipleSelection.value,'11')
}
const onSubmitCar = () => {
  router.push('/mall/goods/order')
}

</script>

<style scoped lang="scss">
.container {
  overflow: hidden;
  background-color: #f7f8fa;

  .car-header-wrap {
    padding: 34px 24px;
    font-size: 20px;
    font-weight: 600;
    color: #021429;
    background-color: #fff;
    border-bottom: 1px solid $borderCol;
  }
}

.car-table {
  margin-bottom: 50px;
  background-color: #fff;

  .goodsPhoto {
    width: 98px;
    height: 98px;
    background-color: #d9d9d9;
    border-radius: 4px;
  }

  .tit-wrap {
    h2 {
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: 500;
      line-height: 19px;
      color: #021429;
    }

    span {
      font-size: 16px;
      color: #040724;
    }
  }

  .num-wrap {
    width: 78px;
  }

  .result-wrap {
    padding: 20px 30px 30px 20px;
    font-size: 16px;

    .del-both {
      margin-left: 20px;
    }

    .result {
      font-size: 16px;

      b {
        margin-right: 50px;
        font-size: 24px;
        color: $primary;
      }
    }

    .submit-btn {
      width: 120px;
    }
  }
}
</style>
